import { DownloadOutlined } from '@apitable/icons';
import { TextButton } from './index';
import { Canvas } from '@storybook/addon-docs';
import { ThemeToggle } from '../../stories/theme-toggle';

<Meta title="en/components/TextButton" />

# TextButton

## Usage

```jsx
import { TextButton } from '@apitable/components';
```
 
## Default

<Canvas>
<ThemeToggle lang="en">
 <TextButton>Text Button</TextButton>
</ThemeToggle>
</Canvas>

## Prefix or suffix icon

<Canvas>
<ThemeToggle lang="en">
    <TextButton prefixIcon={<DownloadOutlined />}>Text Button</TextButton>
    <TextButton suffixIcon={<DownloadOutlined />}>Text Button</TextButton>
</ThemeToggle>
</Canvas>

## Color

<Canvas>
<ThemeToggle lang="en">
    <TextButton color="default">Text Button</TextButton>
    <TextButton color="primary">Text Button</TextButton>
    <TextButton color="danger">Text Button</TextButton>
</ThemeToggle>
</Canvas>

## Size

<Canvas>
<ThemeToggle lang="en">
  <TextButton size="small" color="primary"> Text Button </TextButton>
  <TextButton size="middle" color="primary"> Text Button </TextButton>
  <TextButton size="large" color="primary"> Text Button </TextButton>
</ThemeToggle>
</Canvas>

## Disabled

<Canvas>
<ThemeToggle lang="en">
    <TextButton disabled> Text Button </TextButton>
    <TextButton disabled color="primary"> Text Button </TextButton>
    <TextButton disabled color="danger"> Text Button </TextButton>
</ThemeToggle>
</Canvas>

## Block

<Canvas>
<ThemeToggle lang="en">
    <TextButton block> Text Button </TextButton>
</ThemeToggle>
</Canvas>

## API

| Name       | Type                             | Description      | Default |
|------------|----------------------------------|------------------|---------|
| color      | default / danger / primary       | font color       | default |
| size       | small / middle / large / x-small | font size        | middle  |
| prefixIcon | ReactElement                     | prefix icon      | -       |
| suffixIcon | ReactElement                     | suffix icon      | -       |
| disabled   | boolean                          | disbaled actions | -       |
| block      | boolean                          | fill width       | -       |
